﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>两列表单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../assets/css/style.css" rel="stylesheet" />
</head>
<body>
    <div class="page-wraper">
        <div class="returnback" id="returnTop">
            <a href="javascript:void(0);">
                <i class="fa fa-arrow-up"></i>
            </a>
        </div>
        <h3 class="page-title">两列表单</h3>
        <div class="page-bar">
            <ol class="page-breadcrumb">
                <li>
                    <i class="fa fa-home"></i>
                    <a href="#">页面元素</a>
                    <i class="fa fa-angle-right"></i>
                </li>
                <li>
                    <a href="#">两列表单</a>
                </li>
            </ol>
        </div>

        <div class="page-form">
            <div class="form form-double">
                <table class="table-form">
                    <tbody>
                        <tr>
                            <td class="tdCaption">标题：</td>
                            <td>
                                <input type="text" class="input">
                            </td>
                            <td class="tdCaption">姓名：</td>
                            <td>
                                <input type="text" class="input">
                            </td>
                        </tr>
                        <tr>
                            <td class="tdCaption">选择：</td>
                            <td>
                                <select class="select">
                                    <option>请选择</option>
                                </select>
                            </td>
                            <td class="tdCaption">性别：</td>
                            <td>
                                <div class="chk-inline">
                                    <label class="checkbox inline">男<input type="checkbox"></label>
                                    <label class="checkbox inline">女<input type="checkbox"></label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                选择单位：
                            </th>
                            <td>
                                <select class="select">
                                    <option>办公厅</option>
                                    <option>测试</option>
                                </select>
                            </td>
                            <th>
                                选择部门：
                            </th>
                            <td>
                                <select class="select">
                                    <option>研发部</option>
                                    <option>销售部</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="tdCaption">选择单选框：</td>
                            <td>
                                <div class="chk-inline">
                                    <label class="radio">
                                        <input type="radio" value="RadioButton1" name="RadioButton1" id="RadioButton1">
                                        男
                                    </label>
                                    <label class="radio">
                                        <input type="radio" value="RadioButton2" name="RadioButton2" id="RadioButton2">
                                        女
                                    </label>
                                </div>
                            </td>
                            <th>选择学校：</th>
                            <td>
                                <select class="select">
                                    <option>中国人民大学</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="tdCaption">籍贯：</td>
                            <td>
                                <select class="mini select">
                                    <option>河南省</option>
                                </select>
                                <select class="mini select">
                                    <option>开封市</option>
                                    <option>周口市</option>
                                </select>
                                <select class="mini select">
                                    <option>西华县</option>
                                    <option>鹿邑县</option>
                                </select>
                            </td>
                            <th>家庭地址：</th>
                            <td>
                                <input type="text" class="input">
                            </td>
                        </tr>
                        <tr>
                            <th class="text-top">选择时间：</th>
                            <td>
                                <div class="dataTime form-inline">
                                    <div class="startTime input-time">
                                        <input type="text" class="input mini">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                    <label class="text-join">到</label>
                                    <div class="endTime input-time">
                                        <input type="text" class="input mini">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                </div>
                            </td>
                            <th class="text-top">选择时间：</th>
                            <td>
                                <div class="dataTime form-inline">
                                    <div class="startTime input-time" readonly="true">
                                        <input type="text" class="input mini" readonly="true">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                    <label class="text-join">到</label>
                                    <div class="endTime input-time" readonly="true">
                                        <input type="text" class="input mini" readonly="true">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="tdCaption">头发长：</td>
                            <td>
                                <input type="text" value="30cm" class="input">
                            </td>
                            <th>漂亮程度：</th>
                            <td>
                                <select class="select">
                                    <option>一般</option>
                                    <option>能见人</option>
                                    <option>一般吓人</option>
                                    <option>忒吓人</option>
                                    <option>+不能出门的</option>
                                    <option>不错</option>
                                    <option>漂亮</option>
                                    <option>人见人爱</option>
                                    <option>人间尤物</option>
                                    <option>出门就发生战争</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="tdCaption">添加人员：</td>
                            <td>
                                <div class="input-append">
                                    <input type="text" class="input input-medium" value="特帅管理员">
                                    <span class="add-on"><i class="icon-user"></i></span>
                                </div>
                            </td>
                            <th>添加部门：</th>
                            <td>
                                <div class="input-append">
                                    <a title="清空" class="clear" href="javascript:void(0);"><i class="icon-trash"></i></a>
                                    <input type="text" class="input" value="研发部">
                                    <span class="add-on"><i class="icon-group"></i></span>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="tdCaption">三围：</td>
                            <td>
                                <input type="text" style="color: #ff0000;" value="右边的星号，必填项，建议取消" class="input input-require">
                                <i class="icon-require">*</i>
                            </td>
                            <td class="tdCaption">脚长：</td>
                            <td>
                                <input type="text" class="input">
                            </td>
                        </tr>
                        <tr>
                            <th class="text-top">备注：</th>
                            <td colspan="3">
                                <textarea class="textarea" rows="5" placeholder="请在这里输入备注信息"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <th class="text-top"></th>
                            <td colspan="3">
                                <button type="button" class="btn btn-primary">提交</button>
                                <button type="reset" class="btn btn-default">重置</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">两列表单布局代码如下</h3>
            </div>
            <div class="panel-body">
                <pre><code data-language="html">//两列表格的代码如下
<div class="page-form">
    <div class="form form-double">
        <table class="table-form">
            <tbody>
                <tr>
                    <td class="tdCaption">标题：</td>
                    <td>
                        <input type="text" class="input">
                    </td>
                    <td class="tdCaption">姓名：</td>
                    <td>
                        <input type="text" class="input">
                    </td>
                </tr>
                <tr>
                    <td class="tdCaption">选择：</td>
                    <td>
                        <select class="select">
                        <option>请选择</option>
                        </select>
                    </td>
                    <td class="tdCaption">性别：</td>
                    <td>
                        <div class="chk-inline">
                            <label class="checkbox inline">男<input type="checkbox"></label>
                            <label class="checkbox inline">女<input type="checkbox"></label>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th>
                        选择单位：
                    </th>
                    <td>
                        <select class="select">
                            <option>办公厅</option>
                            <option>测试</option>
                        </select>
                    </td>
                    <th>
                        选择部门：
                    </th>
                    <td>
                        <select class="select">
                            <option>研发部</option>
                            <option>销售部</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="tdCaption">选择单选框：</td>
                    <td>
                        <div class="chk-inline">
                            <label class="radio">
                                <input type="radio" value="RadioButton1" name="RadioButton1" id="RadioButton1">男
                            </label>
                            <label class="radio">
                                <input type="radio" value="RadioButton2" name="RadioButton2" id="RadioButton2">女
                            </label>
                        </div>
                    </td>
                    <th>选择学校：</th>
                    <td>
                        <select class="select">
                            <option>中国人民大学</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="tdCaption">籍贯：</td>
                    <td>
                        <select class="mini select">
                            <option>河南省</option>
                        </select>
                        <select class="mini select">
                            <option>开封市</option>
                            <option>周口市</option>
                        </select>
                        <select class="mini select">
                            <option>西华县</option>
                            <option>鹿邑县</option>
                        </select>
                    </td>
                    <th>家庭地址：</th>
                    <td>
                        <input type="text" class="input">
                    </td>
                </tr>
                <tr>
                    <th class="text-top">选择时间：</th>
                    <td>
                        <div class="dataTime form-inline">
                            <div class="startTime input-time">
                                <input type="text" class="input mini">
                                <i class="fa fa-calendar"></i>
                            </div>
                            <label class="text-join">到</label>
                            <div class="endTime input-time">
                                <input type="text" class="input mini">
                                <i class="fa fa-calendar"></i>
                            </div>
                        </div>
                    </td>
                    <th class="text-top">选择时间：</th>
                    <td>
                        <div class="dataTime form-inline">
                            <div class="startTime input-time" readonly="true">
                                <input type="text" class="input mini" readonly="true">
                                <i class="fa fa-calendar"></i>
                            </div>
                            <label class="text-join">到</label>
                            <div class="endTime input-time" readonly="true">
                                <input type="text" class="input mini" readonly="true">
                                <i class="fa fa-calendar"></i>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="tdCaption">头发长：</td>
                    <td>
                        <input type="text" value="30cm" class="input">
                    </td>
                    <th>漂亮程度：</th>
                    <td>
                        <select class="select">
                            <option>一般</option>
                            <option>能见人</option>
                            <option>一般吓人</option>
                            <option>忒吓人</option>
                            <option>+不能出门的</option>
                            <option>不错</option>
                            <option>漂亮</option>
                            <option>人见人爱</option>
                            <option>人间尤物</option>
                            <option>出门就发生战争</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="tdCaption">添加人员：</td>
                    <td>
                        <div class="input-append">
                            <input type="text" class="input input-medium" value="特帅管理员">
                            <span class="add-on"><i class="icon-user"></i></span>
                        </div>
                    </td>
                    <th>添加部门：</th>
                    <td>
                        <div class="input-append">
                            <a title="清空" class="clear" href="javascript:void(0);"><i class="icon-trash"></i></a>
                            <input type="text" class="input" value="研发部">
                            <span class="add-on"><i class="icon-group"></i></span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="tdCaption">三围：</td>
                    <td>
                        <input type="text" style="color: #ff0000;" value="右边的星号，必填项，建议取消" class="input input-require">
                        <i class="icon-require">*</i>
                    </td>
                    <td class="tdCaption">脚长：</td>
                    <td>
                        <input type="text" class="input">
                    </td>
                </tr>
                <tr>
                    <th class="text-top">备注：</th>
                    <td colspan="3">
                        <textarea class="textarea" rows="5" placeholder="请在这里输入备注信息"></textarea>
                    </td>
                </tr>
                <tr>
                    <th class="text-top"></th>
                    <td colspan="3">
                        <button type="button" class="btn btn-primary">提交</button>
                        <button type="reset" class="btn btn-default">重置</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

                    </code></pre>

            </div>
        </div>
    </div>

    <!--JS代码-->
    <script src="../../assets/js/plugins/jquery.1.8.3.js"></script>
    <script src="../../assets/js/plugins/jquery.mui.js"></script>
    <script src="../../assets/js/plugins/rainbow-custom.min.js"></script>
</body>
</html>
